<template>
  <el-container style="padding: 15px">
    <el-header height="80px">
      <el-form size="small" label-width="70px">
        <el-row type="flex" :gutter="20">
          <el-col :span="4">
            <el-form-item label="专家名称">
              <el-input v-model="searchObj.name" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="指导项目名称" label-width="110px">
              <el-input v-model="searchObj.projectName" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="类型">
              <el-input v-model="searchObj.type" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在单位">
              <el-input v-model="searchObj.unit" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="20" align="middle" justify="center">
          <el-col :span="4">
            <el-form-item label-width="0px">
              <el-button type="primary" @click="page">搜索</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-divider />
    <el-main>
      <el-form size="small">
        <el-row type="flex">
          <el-col :span="4">
            <el-form-item>
              <el-button type="success" @click="addHandler">添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="list">
        <el-table-column label="专家姓名" prop="name" />
        <el-table-column label="专家年龄" prop="age" />
        <el-table-column label="联系方式" prop="telephone" />
        <el-table-column label="类型" prop="type" />
        <el-table-column label="指导项目名称" prop="projectName" />
        <el-table-column label="所在单位" prop="unit" />
        <el-table-column label="现处职位" prop="position" />
        <el-table-column label="推荐人" prop="referrer" />
        <el-table-column label="备注" prop="remark" />
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" size="small" @click="updateHandler(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 40, 80]"
        :page-size="sizePage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-main>
    <el-dialog
      :title="addOrUpdateDialogTitle"
      :visible.sync="addOrUpdateDialogVisible"
      width="30%"
      :before-close="addOrUpdateDialogCloseHandler"
      destroy-on-close
    >
      <el-form ref="specialistUpdateForm" :model="addOrUpdateObj" size="small" label-width="70px" :rules="addOrUpdateRules">
        <el-row type="flex" align="middle" :gutter="20">
          <el-col :span="12">
            <el-form-item label="专家姓名" prop="name" label-width="80px">
              <el-input v-model="addOrUpdateObj.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专家年龄" prop="age">
              <el-input-number v-model="addOrUpdateObj.age" :min="0" :max="100" label="请输入年龄" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="middle" :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系方式" prop="telephone" label-width="80px">
              <el-input v-model="addOrUpdateObj.telephone" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专家类型" prop="type" label-width="80px">
              <el-input v-model="addOrUpdateObj.type" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="middle" :gutter="20">
          <el-col :span="12">
            <el-form-item label="所在单位" prop="unit">
              <el-input v-model="addOrUpdateObj.unit" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="现处职位" prop="position">
              <el-input v-model="addOrUpdateObj.position" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="middle" :gutter="20">
          <el-col :span="12">
            <el-form-item label="推荐人" prop="position">
              <el-input v-model="addOrUpdateObj.referrer" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="middle" :gutter="20">
          <el-col>
            <el-form-item label="指导项目名称" label-width="100px" prop="projectName">
              <el-input v-model="addOrUpdateObj.projectName" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addOrUpdateObj.remark" type="textarea" />
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" @click="addOrUpdate">确定</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
import { specialistAdd, specialistDelete, specialistGetById, specialistPage, specialistUpdate } from '@/api/specialist'

export default {
  name: 'Index',
  data() {
    return {
      searchObj: {},

      addOrUpdateObj: {},
      addOrUpdateRules: {
        name: [
          { required: true, message: '请输入专家姓名', trigger: 'blur' }
        ],
        telephone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入专家类型', trigger: 'blur' }
        ]
      },
      addOrUpdateDialogVisible: false,
      addOrUpdateDialogTitle: '',

      list: [],

      currentPage: 1,
      sizePage: 10,
      totalPage: 0
    }
  },

  created() {
    this.init()
  },

  methods: {
    init() {
      this.page()
    },

    addHandler() {
      this.addOrUpdateDialogTitle = '添加'
      this.addOrUpdateDialogVisible = true
    },

    handleSizeChange(val) {
      this.sizePage = val
      this.page()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.page()
    },

    page() {
      const currentPage = this.currentPage
      const sizePage = this.sizePage
      const searchObj = this.searchObj
      specialistPage(searchObj, currentPage, sizePage).then(res => {
        this.list = res.data.list
        this.totalPage = res.data.total
        console.log(this.list)
      })
    },

    add() {
      const addOrUpdateObj = this.addOrUpdateObj
      specialistAdd(addOrUpdateObj).then(res => {
        this.$message.success(res.message)
        this.resetForm()
      })
    },

    resetForm() {
      this.addOrUpdateObj = {}
      // 重置成功提示框
      this.$message({
        message: '重置成功',
        type: 'success'
      })
    },

    addOrUpdateDialogCloseHandler() {
      this.addOrUpdateDialogVisible = false
      this.addOrUpdateDialogTitle = ''
    },

    updateHandler(id) {
      specialistGetById(id).then(res => {
        this.addOrUpdateObj = res.data.byId
        this.addOrUpdateDialogTitle = '修改'
        this.addOrUpdateDialogVisible = true
      })
    },

    addOrUpdate() {
      this.$refs.specialistUpdateForm.validate(valid => {
        if (valid) {
          const addOrUpdateObj = this.addOrUpdateObj
          if (addOrUpdateObj.id) {
            // 修改
            specialistUpdate(addOrUpdateObj).then(res => {
              this.$message.success(res.message)
              this.page()
              this.addOrUpdateDialogCloseHandler()
            })
          } else {
            // 添加
            specialistAdd(addOrUpdateObj).then(res => {
              this.$message.success(res.message)
              this.page()
              this.addOrUpdateDialogCloseHandler()
            })
          }
        } else {
          this.$message.warning('请根据表格提示进行填写')
        }
      })
    },

    deleteById(id) {
      this.$confirm('此操作属于危险操作，请确认删除', '删除', {
        cancelButtonText: '取消',
        confirmButtonText: '确定'
      }).then(() => {
        specialistDelete(id).then(res => {
          this.$message.success(res.message)
          this.page()
        })
      })
    },

    resetSearch() {
      this.currentPage = 1
      this.searchObj = {}
      this.page()
      // 重置成功提示框
      this.$message({
        message: '重置成功',
        type: 'success'
      })
    }
  }
}
</script>

<style scoped>

</style>
